package myJs.search

import myJs.api.Api
import myJs.cps._
import myJs.myPkg.{MyFetch, ReactRouterDOM, layer}
import myJs.tool.Tool
import org.scalajs.dom.{URLSearchParams, html}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.core.facade.React
import slinky.web.html._

import scala.scalajs.js
//import myJs.myPkg.i18n.ReactI18next
import myJs.Implicits._
import myJs.myPkg.jquery._

import scala.scalajs.js.Dynamic.{global => g}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object FormCp {

  case class Props(tableRsChange:(List[ujson.Obj])=>Unit)

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val geneNameP = searchParams.get("geneName").null2Empty
    val tabP = searchParams.get("tab").null2Empty
    val initGeneSymbol=if(tabP=="mRna" && geneNameP.nonBlank) geneNameP else ""
    val (geneSymbol, setGeneSymbol) = useState(initGeneSymbol)
    val formRef = React.createRef[html.Form]
    object FTool {

      def showExample(eg: String) = () => {
        setGeneSymbol(eg)
      }

      def geneSymbolChange = (v: String) => {
        setGeneSymbol(v)
      }

      def mySearch = () => {
        val formJq = $(formRef.current)
        val bv = formJq.bv
        bv.validate()
        val valid = bv.isValid()
        if (valid) {
          val index = layer.alert(Tool.loadingElement, Tool.layerOptions)
          val formData = formJq.serialize()
          Api.searchByGeneSymbol(formData).map { datas =>
            layer.close(index)
            props.tableRsChange(datas)
          }
        }
        ()
      }

      def bootstrapValidator = {
        val formJq = $(formRef.current)
        val dict: js.Dictionary[js.Any] = js.Dictionary(
          "feedbackIcons" -> js.Dictionary(
            "valid" -> "glyphicon glyphicon-ok",
            "invalid" -> "glyphicon glyphicon-remove",
            "validating" -> "glyphicon glyphicon-refresh",
          ),
          "fields" -> {
            js.Dictionary(
              "geneName" -> {
                val info = "Gene Symbol"
                js.Dictionary(
                  "validators" -> js.Dictionary(
                    "notEmpty" -> js.Dictionary(
                      "message" -> s"${info} is required！"
                    ),
                  )
                )
              },
            )
          }
        )
        formJq.bootstrapValidator(dict)
      }

    }

    useEffect(() => {
      FTool.bootstrapValidator
      if(geneSymbol.nonBlank){
        FTool.mySearch()
      }
    }, List()
    )

    useEffect(() => {
      $(formRef.current).bv.revalidateField("geneName")
    }, List(geneSymbol)
    )

    val egStr = "AFP,GPC3"

    form(className := "registration-form", ref := formRef,

      div(className := "row",
        div(className := "form-group",
          label("Gene Symbol:"),
          PureTextareaCp(name = "geneName", rows = "5", placeHolder = "Your gene symbols separated by comma", value = geneSymbol,
            onChange = FTool.geneSymbolChange),
          span(className := "help-block",
            "e.g., ",
            a(onClick := FTool.showExample(egStr), em(egStr))
          )
        ),
        div(className := "form-group",
          div(className := "actions col-sm-offset-1 col-sm-3",
            button(style := Style(width = "90%"), `type` := "button", className := "btn btn-primary",
              onClick := FTool.mySearch,
              s" search",
            )
          )
        ),

      )

    )

  }

  object STool {

  }

}
